<template>
  <div class="plugListAll">
    <div class="btnList">
      <el-button type="primary" @click="getComponent(item.component)" v-for="item in buttonList" :key="item.component">{{item.title}}</el-button>

    </div>

    <keep-alive>
      <transition enter-active-class="animated zoomInDown" leave-active-class="animated zoomOutDown" mode="out-in">
        <component v-if="component" :is="component" :Nodes="Nodes" :Edges="Edges" :stepTypeList="stepTypeList" :stepTypeClass="stepTypeClass" @nodehoverendfn="nodeHoverend" @nodecontextmenu="nodeContextmenu" @clickaction="clickAction" @nodeclick="nodeClick" @cycontextmenu="cyContextmenu" @nodehover="nodeHover"></component>
      </transition>
    </keep-alive>
    <div id="share" @click="share">分享</div>
  </div>
</template>

<script>
import SwiperPlug from "@/components/plugList/swiperPlug.vue";
import NavMenu from "@/components/navMenu.vue";
import MainSlot from "@/components/slotList/mainSlot.vue";
import MediaQuery from "@/components/slotList/mediaQuery.vue";
import Echarts from "@/components/echarts/echarts.vue";
import Cytoscape from "@/components/plugList/cytoscapeDemo.vue";
import Moment from "@/components/plugList/momentDemo.vue";
import cytoscapeNodes from "@/components/plugList/cytoscapeNodes.vue";
import Watchjs from "@/components/plugList/watchJS.vue";
import { NodeList } from "@/assets/js/cytoscapeData.js";
import cytoscape from "cytoscape";
import Mock from "@/components/plugList/mock.vue";
import Bpmn from "@/components/plugList/bpmn.vue";
import LogicFlow from "@/components/plugList/LogicFlow.vue";
import AntVX6 from "@/components/plugList/antvX6.vue";

import {
  cytoscapeLayout,
  cytoscapeStyle,
  cytoscapeBaseInfo,
  stepTypeList,
} from "@/assets/js/cytoscapeData.js";
window.cytoscapeLayouts = cytoscapeLayout;
window.cytoscapeStyle = cytoscapeStyle;
window.cytoscapeBaseInfo = cytoscapeBaseInfo;
window.cytoscape = cytoscape;
window.stepTypeList = stepTypeList;
export default {
  name: "plugList",
  components: {
    SwiperPlug,
    NavMenu,
    MainSlot,
    MediaQuery,
    Watchjs,
    Echarts,
    Cytoscape,
    Moment,
    Mock,
    cytoscapeNodes,
    Bpmn,
    LogicFlow,
    AntVX6,
  },

  data() {
    return {
      component: "",
      Nodes: {},
      Edges: {},
      stepTypeList: [],
      stepTypeClass: new Map(),
      buttonList: [
        { title: "轮播图swiper", component: "SwiperPlug" },
        { title: "导航菜单", component: "NavMenu" },
        { title: "常用插件合集", component: "MainSlot" },
        { title: "媒体查询插件", component: "MediaQuery" },
        { title: "echarts图表", component: "Echarts" },
        { title: "cytoscape (dag关系图)", component: "Cytoscape" },
        { title: "cytoscape (组件化+html元素)", component: "cytoscapeNodes" },
        { title: "时间格式插件momentjs", component: "Moment" },
        { title: "属性监听插件watchJS", component: "Watchjs" },
        { title: "mock和请求拦截", component: "Mock" },
        { title: "bpmn.js 流程图", component: "Bpmn" },
        { title: "AntV X6", component: "AntVX6" },
        { title: "LogicFlow 流程图工具", component: "LogicFlow" },
      ],
    };
  },

  methods: {
    getComponent(str) {
      this.component = str;
      if (str == "cytoscapeNodes") {
        let { Nodes, Edges } = NodeList;
        this.Nodes = Nodes;
        this.Edges = Edges;
        this.stepTypeList = stepTypeList;
        this.stepTypeClass.set(10, "微服务调用");
        this.stepTypeClass.set(8, "SQL计算");
        this.stepTypeClass.set(7, "分组同步");
      } else {
        this.Nodes = {};
        this.Edges = {};
        this.stepTypeList = [];
        this.stepTypeClass = new Map();
      }
    },
    share() {
      console.log("share");
      let me = this;
      let host = window.location.host; //返回url 的主机部分，例如：mp.csdn.net
      let hostname = window.location.hostname; //返回mp.csdn.net
      let href = window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)
      let pathname = window.location.pathname; //返回/a/index.php或者/index.php
      let protocol = window.location.protocol; //返回url 的协议部分，例如： http:，ftp:，maito:等等。
      let port = window.location.port; //url 的端口部分，如果采用默认的80端口，那么返回值并不是默认的80而是空字符
      console.log("host", host);
      console.log("hostname", hostname);
      console.log("href", href);
      console.log("pathname", pathname);
      console.log("protocol", protocol);
      console.log("port", port);
      let query = me.$route.query;
      let path = me.$route.path;
      console.log("query", query);
      console.log("$route", me.$route.path);
      let urlName = protocol + "//" + host + "/#" + path;
      if (me.component) {
        urlName += "?q=" + me.component;
      }
      console.log("urlName", urlName);
      this.$copyText(urlName).then(
        function (e) {
          me.$notify({
            title: "成功",
            message: "网站地址已复制",
            type: "success",
          });
          console.log(e);
        },
        function (e) {
          me.$notify({
            title: "成功",
            message: "复制失败",
            type: "error",
          });
          console.log(e);
        }
      );
    },
    nodeContextmenu(item) {
      console.log("----plugList nodeContextmenu", item);
    },
    clickAction() {
      console.log("----plugList clickAction");
    },
    nodeClick(item) {
      console.log("----plugList nodeClick", item);
    },
    nodeHover(item) {
      console.log("----plugList nodeHover", item);
    },
    nodeHoverend(item) {
      console.log("----plugList nodeMοuseοver nodesMοuseοver", item);
    },
    cyContextmenu() {
      console.log("----plugList cyContextmenu");
    },
  },

  mounted() {
    //默认加载模糊查询
    this.component = "";
    let q = this.$route.query.q;
    console.log(q);

    if (q) {
      this.component = q;
    }
  },
};
</script>

<style scoped>
.btnList {
  width: 100%;
}
#share {
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  border-radius: 50%;
  background-color: #007aff;
  color: #fff;
  font-size: 14px;
  position: fixed;
  bottom: 40px;
  right: 40px;
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
